<template>
  <div slot="select01">
    <div class="flexConent business1" v-if="obj.checkpay && obj.checkpay.length>0">
      <p class="flexCenter">
        <span class="bgColororange1"></span>
        <i>业务审核</i>
      </p>
      <p class="flexCenter">
        <span class="bgColororange2"></span>
        <i>单据准备</i>
      </p>
      <p class="flexCenter">
        <span class="bgColororange3"></span>
        <i>共享处理</i>
      </p>
    </div>
    <div class="selectOne" v-for="(item, index) in obj.checkpay" :key="index">
      <div class="flexConent flexBetween">
        <p class="selectitle">
          <b v-if="roleType==0" class="numFontFamily">{{ item.BILL_ID }}</b>
          <b v-else-if="detailType==1" class="numFontFamily">{{ item.BILL_ID }}</b>
          <b v-else-if="roleType==1 && detailType==2" class="numFontFamily">{{ item.USR_CAPTION }}</b>
          <b v-else-if="roleType==2 && detailType==2" class="numFontFamily">{{ item.ORG_NAME }}</b>
          <b v-else-if="roleType==3 && detailType !=1" class="numFontFamily">{{ item.ORG_NAME }}</b>
          <b v-if="detailType!=1">
            (
            <span class="numFontFamily">{{item.AMOUNT}}</span>单)
          </b>
        </p>
        <p v-if="detailType==1">
          <span class="fontSize30 payAmt numFontFamily">{{item.PAY_AMT}}</span>
          <span class="rightDay">元</span>
        </p>
      </div>
      <div class="flexConent flexBetween">
        <div class="flexConent" style="width:88%;">
          <div class="chart" :id="'item-'+index" style="width:95%;height:1rem;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['obj', 'roleType', 'detailType', 'tabView'],
  data() {
    return {
      options: {
        calculable: true,
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          show: false
        },
        grid: {
          left: '0',
          right: '0',
          top: 'center'
        },
        series: [
          {
            name: '业务审核', // todo xAxis.data值
            type: 'bar',
            stack: '处理', // 控制是堆型，还是列型图
            barCategoryGap: '5%',
            barMinHeight: this.globalVariable.barMinHeight,
            barWidth: 22, //柱图宽度
            label: {
              normal: {
                fontSize: this.globalVariable.itemFontSize,
                color: this.globalVariable.labelColor,
                show: true
              }
            },
            itemStyle: {
              normal: {
                barBorderRadius: [4, 0, 0, 4],
                color: '#97BBFA',
                fontFamily: 'numFontFamily'
              }
            },
            data: [] // todo xAxis.data[0]值
          },
          {
            name: '共享处理',
            type: 'bar',
            stack: '处理', // 控制是堆型，还是列型图
            barCategoryGap: '5%',
            barMinHeight: this.globalVariable.barMinHeight,
            barWidth: 22, //柱图宽度
            label: {
              normal: {
                fontSize: this.globalVariable.itemFontSize,
                color: this.globalVariable.labelColor,
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#90D9B4',
                fontFamily: 'numFontFamily'
              }
            },
            data: []
          },
          {
            name: '处理',
            type: 'bar',
            stack: '处理', // 控制是堆型，还是列型图
            barCategoryGap: '5%',
            barMinHeight: this.globalVariable.barMinHeight,
            barWidth: 22, //柱图宽度
            label: {
              normal: {
                fontSize: this.globalVariable.itemFontSize,
                color: this.globalVariable.labelColor,
                show: true
              }
            },
            itemStyle: {
              normal: {
                barBorderRadius: [0, 4, 4, 0],
                color: '#FACD82',
                fontFamily: 'numFontFamily'
              }
            },
            data: []
          },
          {
            name: '平均天数',
            type: 'bar',
            stack: '处理',
            barCategoryGap: '5%',
            barWidth: 22, //柱图宽度
            label: {
              normal: {
                show: true,
                position: 'insideLeft',
                fontSize: 12,
                color: '#666',
                fontFamily: 'numFontFamily'
              }
            },
            itemStyle: {
              normal: {
                color: '#fff'
              }
            },
            data: []
          }
        ]
      }
    }
  },
  watch: {
    roleType(newVal, oldVal) {
      this.roleType = newVal
    },
    obj(newVal, oldVal) {
      this.obj = newVal
    },
    tabView(newVal, oldVal) {
      this.showDetail()
    }
  },
  mounted() {
    this.showDetail()
  },
  methods: {
    showDetail() {
      this.$nextTick(() => {
        let list = this.obj.checkpay.map(item => Number(item.SJ_FQ_ZF))
        let max = list.reduce(function(a, b) {
          return b > a ? b : a
        })
        this.obj.checkpay.forEach((item, index) => {
          let itemName = 'item-' + index
          let option = 'options' + index
          option = JSON.parse(JSON.stringify(this.options))
          option.series[0].data = [item.YWSH]
          option.series[1].data = [item.DBYD]
          option.series[2].data = [item.GXCL]
          option.series[3].data = [item.SJ_FQ_ZF]
          option.xAxis.max = max * 1.2
          itemName = this.$echarts.init(document.getElementById(itemName))
          itemName.setOption(option)
        })
      })
    }
  }
}
</script>